<template>
  <basic-container>
    <el-tabs v-model="activeName" style="margin: 0 10px">
      <el-tab-pane label="序列号追溯" name="序列号追溯"></el-tab-pane>
      <el-tab-pane label="工单追溯" name="工单追溯"></el-tab-pane>
    </el-tabs>
    <div class="header">
      <avue-form v-show="activeName === '序列号追溯'" ref="snDimensionForm" v-model="snDimensionSearch" :option="snDimensionOption">
        <template slot="sn">
          <el-input placeholder="请输入产品序列号" v-model="snDimensionSearch.sn" name="sn" clearable :disabled="requestLoading" @keydown.enter.native="onSubmit"></el-input>
        </template>
      </avue-form>
      <avue-form v-show="activeName === '工单追溯'" ref="woDimensionForm" v-model="woDimensionSearch" :option="woDimensionOption">
        <template slot="productionOrderNo">
          <el-input name="productionOrderNo" v-model="woDimensionSearch.productionOrderNo" :clearable="true" :disabled="requestLoading" @keydown.enter.native="onSubmit">
            <el-button slot="append" icon="el-icon-search" @click="openProductionOrderModal"></el-button>
          </el-input>
        </template>
        <template slot="workOrderNo">
          <el-input name="workOrderNo" v-model="woDimensionSearch.workOrderNo" :clearable="true" :disabled="requestLoading" @keydown.enter.native="onSubmit">
            <el-button slot="append" icon="el-icon-search" @click="openWorkOrderNoModal"></el-button>
          </el-input>
        </template>
      </avue-form>
      <el-button v-if="!requestLoading" type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
      <el-button v-if="requestLoading" type="primary" size="small" icon="el-icon-loading" disabled>加载中</el-button>
      <!-- <el-form label-width="100px" :inline="true" :rules="rules" @submit.native.prevent>
        <el-form-item v-if="activeName === '序列号追溯'" label="序列号:" prop="sequenceNumber">
          <el-input name="sequenceNumber" v-model="sequenceNumber" :clearable="true" @keydown.enter.native="onSubmit"></el-input>
        </el-form-item>
        <el-form-item v-if="activeName === '工单追溯'" label="工单号:" prop="workOrderNo">
          <el-input name="workOrderNo" v-model="workOrderNo" :clearable="true" @keydown.enter.native="onSubmit">
            <el-button slot="append" icon="el-icon-search" @click="openWorkOrderNoModal"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form> -->
    </div>

    <el-divider>基础信息</el-divider>
    <div id="workOrderInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowWorkOrderData')">
          <h4>工单信息</h4>
          <i :class="[isShowWorkOrderData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ workOrderData.length }}条记录</span>
    </div>
    <avue-crud v-show="isShowWorkOrderData" :option="workOrderOption" :table-loading="workOrderLoading" :data="workOrderData">
      <template slot-scope="{ row }" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text" @click="workOrderDetailView(row)">详情</el-button>
      </template>
      <template slot="workOrderNo" slot-scope="scope">
        <span v-if="activeName === '序列号追溯'">{{ scope.row.workOrderNo }}</span>
        <span v-else style="color: #3dbbf3; cursor: pointer" @click="queryByWorkOrderNo(scope.row.workOrderNo)">{{ scope.row.workOrderNo }}</span>
      </template>
    </avue-crud>
    <div id="deliveryInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowDeliveryData')">
          <h4>发货信息</h4>
          <i :class="[isShowDeliveryData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ deliveryData.length }}条记录</span>
    </div>
    <avue-crud v-show="isShowDeliveryData" :option="deliveryOption" :table-loading="deliveryLoading" :data="deliveryData"></avue-crud>
    <div v-if="activeName === '序列号追溯'" id="associationInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowAssociationData')">
          <h4>关联信息</h4>
          <i :class="[isShowAssociationData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ associationData.length }}条记录</span>
    </div>
    <transition v-if="activeName === '序列号追溯'">
      <avue-crud v-show="isShowAssociationData" :option="associationOption" :table-loading="associationLoading" :data="associationData"></avue-crud>
    </transition>
    <div id="passingStationInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowPassingStationData')">
          <h4>过站信息</h4>
          <i :class="[isShowPassingStationData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ passingStationData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowPassingStationData"
      :option="passingStationInfoOption"
      :table-loading="passingStationLoading"
      :page.sync="passingStationPage"
      :data="passingStationData"
      @current-change="passingStationCurrentChange"
      @size-change="passingStationSizeChange"
    ></avue-crud>
    <div id="assembleParentLevelInfo" class="title" v-if="activeName === '序列号追溯'">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowAssembleParentLevelData')">
          <h4>组装父级</h4>
          <i :class="[isShowAssembleParentLevelData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ assembleParentLevelData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowAssembleParentLevelData && activeName === '序列号追溯'"
      :option="assembleParentLevelInfoOption"
      :table-loading="assembleParentLevelLoading"
      :data="assembleParentLevelData"
    ></avue-crud>
    <div id="assemblySubLevelInfo" class="title" v-if="activeName === '序列号追溯'">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowAssemblySubLevelData')">
          <h4>组装子级</h4>
          <i :class="[isShowAssemblySubLevelData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ assemblySubLevelData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowAssemblySubLevelData && activeName === '序列号追溯'"
      :option="assemblySubLevelInfoOption"
      :table-loading="assemblySubLevelLoading"
      :data="assemblySubLevelData"
    ></avue-crud>
    <div id="usePartInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowUsePartData')">
          <h4>用料信息</h4>
          <i :class="[isShowUsePartData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <!-- <span>共{{ associationData.length }}条记录</span> -->
    </div>
    <el-tabs v-show="isShowUsePartData" v-model="usePartType" type="border-card">
      <el-tab-pane label="仓库发料" name="warehouseUsePart">
        <avue-crud
          :option="warehouseUsePartOption"
          :table-loading="warehouseUsePartLoading"
          :data="warehouseUsePartData"
          :page.sync="warehouseUsePartPage"
          @current-change="warehouseUsePartCurrentChange"
          @size-change="warehouseUsePartSizeChange"
        >
        </avue-crud>
      </el-tab-pane>
      <el-tab-pane v-for="(item, index) in workSectionList" :key="index" :label="item.name" :name="item.key">
        <el-table height="200" :data="workSectionUsePartInfoData" border style="width: 100%">
          <el-table-column label="序号" prop="index" width="50"></el-table-column>
          <el-table-column v-for="(columnItem, index) in item.column" :label="columnItem.label" :prop="columnItem.prop" :key="index"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div id="accessoriesInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowAccessoriesData')">
          <h4>辅料信息</h4>
          <i :class="[isShowAccessoriesData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ accessoriesData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowAccessoriesData"
      :option="accessoriesInfoOption"
      :table-loading="accessoriesLoading"
      :page.sync="accessoriesPage"
      :data="accessoriesData"
      @current-change="accessoriesCurrentChange"
      @size-change="accessoriesSizeChange"
    ></avue-crud>
    <div id="equipmentInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowEquipmentData')">
          <h4>设备信息</h4>
          <i :class="[isShowEquipmentData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ equipmentData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowEquipmentData"
      :option="equipmentInfoOption"
      :table-loading="equipmentLoading"
      :page.sync="equipmentPage"
      :data="equipmentData"
      @current-change="equipmentCurrentChange"
      @size-change="equipmentSizeChange"
    >
      <template slot-scope="{ row }" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text" @click="equipmentDetailView(row)">详情</el-button>
      </template>
    </avue-crud>
    <div id="packInfo" class="title" v-if="activeName === '序列号追溯'">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowPackData')">
          <h4>包装信息</h4>
          <i :class="[isShowPackData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ packData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowPackData && activeName === '序列号追溯'"
      :option="packInfoOption"
      :table-loading="packLoading"
      :page.sync="packPage"
      :data="packData"
      @current-change="packCurrentChange"
      @size-change="packSizeChange"
    >
    </avue-crud>
    <div id="maintenanceInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowMaintenanceData')">
          <h4>维修信息</h4>
          <i :class="[isShowMaintenanceData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ maintenancePage.total }}条记录</span>
    </div>
    <avue-crud
      v-if="isShowMaintenanceData"
      :option="maintenanceInfoOption"
      v-loading="maintenanceLoading"
      :data="maintenanceData"
      ref="maintenanceCrud"
      :page.sync="maintenancePage"
      @current-change="maintenanceCurrentChange"
      @size-change="maintenanceSizeChange"
    ></avue-crud>
    <div id="inspectionInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowInspectionData')">
          <h4>抽巡检信息</h4>
          <i :class="[isShowInspectionData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ inspectionData.length }}条记录</span>
    </div>
    <avue-crud
      v-show="isShowInspectionData"
      :option="inspectionInfoOption"
      :table-loading="inspectionLoading"
      :page.sync="inspectionPage"
      :data="inspectionData"
      @current-change="inspectionChange"
      @size-change="inspectionChange"
    ></avue-crud>
    <div v-if="activeName === '序列号追溯'" id="testInfo" class="title">
      <div class="titleLeft">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="titleName" @click="toggleInfo('isShowTestData')">
          <h4>测试信息</h4>
          <i :class="[isShowTestData ? 'arrowDown' : '']" class="arrowRight el-icon-arrow-right"></i>
        </div>
      </div>
      <span>共{{ testData.length }}条记录</span>
    </div>
    <transition v-if="activeName === '序列号追溯'">
      <avue-crud
        v-show="isShowTestData"
        :option="testInfoOption"
        :table-loading="testLoading"
        :data="testData"
        :page.sync="testPage"
        @current-change="testCurrentChange"
        @size-change="testSizeChange"
      ></avue-crud>
    </transition>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </common-modal-template>
    <div v-if="!sideNav" class="box-card-hide" @click="sideNav = true">
      <i class="el-icon-arrow-right"></i>
    </div>
    <el-card v-if="sideNav" class="box-card">
      <div slot="header" class="clearfix">
        <span>目录</span>
        <el-button style="float: right; padding: 3px 3px" type="info" icon="el-icon-close" circle @click="sideNav = false"></el-button>
      </div>
      <div class="catalogue">
        <div>基础信息</div>
        <ul>
          <li @click="goToLocation('#workOrderInfo')">工单信息</li>
          <li @click="goToLocation('#deliveryInfo')">发货信息</li>
          <li v-if="activeName === '序列号追溯'" @click="goToLocation('#associationInfo')">关联信息</li>
        </ul>
        <div>生产信息</div>
        <ul>
          <li @click="goToLocation('#passingStationInfo')">过站信息</li>
          <li v-if="activeName === '序列号追溯'" @click="goToLocation('#assembleParentLevelInfo')">组装父级</li>
          <li v-if="activeName === '序列号追溯'" @click="goToLocation('#assemblySubLevelInfo')">组装子级</li>
          <li @click="goToLocation('#usePartInfo')">用料信息</li>
          <li @click="goToLocation('#accessoriesInfo')">辅料信息</li>
          <li @click="goToLocation('#equipmentInfo')">设备信息</li>
          <li v-if="activeName === '序列号追溯'" @click="goToLocation('#packInfo')">包装信息</li>
        </ul>
        <div>品质信息</div>
        <ul>
          <li @click="goToLocation('#maintenanceInfo')">维修信息</li>
          <li @click="goToLocation('#inspectionInfo')">抽巡检信息</li>
          <li v-if="activeName === '序列号追溯'" @click="goToLocation('#testInfo')">测试信息</li>
        </ul>
      </div>
    </el-card>
    <el-dialog title="详情" :visible.sync="showWorkOrderDetailDialog" width="60%" top="5vh" append-to-body="true">
      <avue-crud
        ref="detailCrud"
        :option="workOrderDetailOption"
        :table-loading="workOrderDetailLoading"
        :page.sync="workOrderDetailPage"
        :data="workOrderDetailData"
        @current-change="workOrderDetailCurrentChange"
        @size-change="workOrderDetailSizeChange"
      ></avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showWorkOrderDetailDialog = false"><i class="el-icon-circle-close"></i><span>取 消</span></el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>
<script>
import {
  getSnByOuterSn,
  getWorkOrderInfo,
  getWorkOrderDetailInfo,
  getDeliveryInfo,
  getAssociationInfo,
  getOverStationInfoBySn,
  getOverStationInfoByWorkOrderNo,
  getAssemblyParentInfo,
  getAssemblySonInfo,
  getAccessoryInfo,
  getEquipmentInfo,
  getPackInfo,
  getInspectionInfo,
  getMachineTestInfo,
  getWarehouseUsePart,
  getRepairInfoBySn,
  getUsageList,
  getParamKey,
  getSectionByWorkOrder,
  getTraceList
} from '@/api/report/forward-trace-back-to';
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import { focusInput } from '@/util/helpers';
import {
  workOrderOption,
  deliveryOption,
  associationOption,
  passingStationInfoOption,
  assembleParentLevelInfoOption,
  assemblySubLevelInfoOption,
  accessoriesInfoOption,
  equipmentInfoOption,
  packInfoOption,
  inspectionInfoOption,
  maintenanceInfoOption,
  testInfoOption,
  warehouseUsePartOption
} from './forwardTraceBackToOptions.js';
export default {
  components: {
    CommonModalTemplate
  },
  mixins: [],
  data() {
    return {
      requestLoading: false,
      activeName: '序列号追溯',
      snDimensionSearch: {},
      snDimensionOption: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: '序列号',
            prop: 'sn',
            span: 6,
            rules: [
              {
                required: true,
                message: '请输入序列号',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      // sequenceNumber: '',
      // workOrderNo: '',
      woDimensionSearch: {},
      woDimensionOption: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: '生产订单',
            prop: 'productionOrderNo',
            span: 6
          },
          {
            label: '工单号',
            prop: 'workOrderNo',
            span: 6
          }
        ]
      },
      rules: {
        sn: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ],
        workOrderNo: [
          {
            required: true,
            trigger: 'submit',
            validator: (rule, value, callback) => {
              callback();
            }
          }
        ]
      },
      isShowWorkOrderData: true,
      isShowDeliveryData: true,
      isShowAssociationData: false,
      isShowPassingStationData: false,
      isShowAssembleParentLevelData: false,
      isShowAssemblySubLevelData: false,
      isShowUsePartData: false,
      isShowAccessoriesData: false,
      isShowEquipmentData: false,
      isShowPackData: false,
      isShowMaintenanceData: false,
      isShowInspectionData: false,
      isShowTestData: false,
      sideNav: true,
      workOrderOption,
      workOrderLoading: false,
      workOrderData: [],
      workOrderNos: [],
      deliveryOption,
      deliveryData: [],
      deliveryLoading: false,
      associationOption,
      associationData: [],
      associationLoading: false,
      passingStationInfoOption,
      passingStationLoading: false,
      passingStationData: [],
      passingStationPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      assembleParentLevelInfoOption,
      assembleParentLevelLoading: false,
      assembleParentLevelData: [],
      assemblySubLevelInfoOption,
      assemblySubLevelLoading: false,
      assemblySubLevelData: [],
      accessoriesInfoOption,
      accessoriesLoading: false,
      accessoriesData: [],
      accessoriesPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      equipmentInfoOption,
      equipmentLoading: false,
      equipmentPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      equipmentData: [],
      packInfoOption,
      packData: [],
      packLoading: false,
      packPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      inspectionInfoOption,
      inspectionLoading: false,
      inspectionPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      inspectionData: [],
      maintenanceInfoOption,
      maintenanceLoading: false,
      maintenancePage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      maintenanceData: [],
      testInfoOption,
      testLoading: false,
      testData: [],
      testPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      timer: new Date().getTime(), //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
      modalName: '', //打开公用模态框名称
      tableOption: {}, //公用模态框配置信息
      usePartType: 'warehouseUsePart',
      warehouseUsePartOption,
      warehouseUsePartLoading: false,
      warehouseUsePartData: [],
      warehouseUsePartPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      workSectionList: [], //开启了工段追溯的工段
      workSectionUsePartInfoOption: {
        height: 250,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: true,
        indexLabel: '序号',
        column: []
      },
      workSectionUsePartInfoData: [],
      flag: false,
      sectionListFormWorkOrder: [], //工单工艺中的工段
      showWorkOrderDetailDialog: false,
      workOrderDetailOption: {
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        indexLabel: '序号',
        column: [
          { label: '产品序列号', prop: 'productSn' },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            dicData: [
              { label: '生产中', value: 1 },
              { label: '已完成', value: 2 },
              { label: '待不良判定', value: 3 },
              { label: '维修中', value: 4 },
              { label: '待出维修', value: 5 },
              { label: '锁定', value: 6 },
              { label: '报废', value: 7 },
              { label: '停用', value: 8 }
            ]
          },
          { label: '当前工序', prop: 'currentRouteName' }
        ]
      },
      workOrderDetailData: [],
      workOrderDetailLoading: false,
      workOrderDetailPage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      viewWorkOrderNo: ''
    };
  },
  watch: {
    activeName(val) {
      this.maintenancePage = {
        pageSize: 20,
        currentPage: 1,
        total: 0
      };
      this.maintenanceData = [];
      if (val === '序列号追溯') {
        this.workOrderOption.menu = false;
        let workOrderNoColumn = this.findObject(this.passingStationInfoOption.column, 'workOrderNo');
        workOrderNoColumn.hide = false;
        let passQuantityColumn = this.findObject(this.passingStationInfoOption.column, 'passQuantity');
        passQuantityColumn.hide = true;
        let waitingQuantityColumn = this.findObject(this.passingStationInfoOption.column, 'waitingQuantity');
        waitingQuantityColumn.hide = true;
        let transactionTimeColumn = this.findObject(this.passingStationInfoOption.column, 'transactionTime');
        transactionTimeColumn.hide = false;
      } else {
        this.workOrderOption.menu = true;
        let workOrderNoColumn = this.findObject(this.passingStationInfoOption.column, 'workOrderNo');
        workOrderNoColumn.hide = true;
        let passQuantityColumn = this.findObject(this.passingStationInfoOption.column, 'passQuantity');
        passQuantityColumn.hide = false;
        let waitingQuantityColumn = this.findObject(this.passingStationInfoOption.column, 'waitingQuantity');
        waitingQuantityColumn.hide = false;
        let transactionTimeColumn = this.findObject(this.passingStationInfoOption.column, 'transactionTime');
        transactionTimeColumn.hide = true;
      }
    },
    usePartType(val) {
      if (val === 'warehouseUsePart') {
        this.queryWarehouseUsePart();
      } else {
        if (this.activeName === '序列号追溯') {
          if (this.snDimensionSearch.sn) {
            let params = {
              sn: this.snDimensionSearch.sn,
              sectionId: val
            };
            getUsageList(1, 10000, params).then(
              (res) => {
                let data = this._get(res, 'data.data.records', []);
                this.workSectionUsePartInfoData = this._map(data, (item, index) => {
                  item.index = index + 1;
                  return item;
                });
              },
              (error) => {
                this.workSectionUsePartInfoData = [];
              }
            );
          }
        } else {
          if (this.woDimensionSearch.workOrderNo) {
            let params = {
              productionOrderNo: this.woDimensionSearch.productionOrderNo,
              workOrderNos: this.woDimensionSearch.workOrderNo,
              sectionId: val
            };
            getUsageList(1, 10000, params).then(
              (res) => {
                let data = this._get(res, 'data.data.records', []);
                this.workSectionUsePartInfoData = this._map(data, (item, index) => {
                  item.index = index + 1;
                  return item;
                });
              },
              (error) => {
                this.workSectionUsePartInfoData = [];
              }
            );
          }
        }
      }
    }
  },
  mounted() {
    if (this.$route.query.workOrderNo) {
      this.activeName = '工单追溯';
      this.$set(this.woDimensionSearch, 'workOrderNo', this.$route.query.workOrderNo);
      this.onSubmit();
    }
    if (this.$route.query.sequenceNumber) {
      this.activeName = '序列号追溯';
      this.snDimensionSearch.sn = this.$route.query.sequenceNumber;
      this.onSubmit();
    }
    getParamKey({ paramKey: 'TraceSpecialEquipmentFlag' }).then(
      (res) => {
        this.flag = this._get(res, 'data.data.paramValue', 'false');
      },
      (error) => {
        this.flag = 'false';
      }
    );
  },
  methods: {
    async onSubmit() {
      if (this.activeName === '序列号追溯') {
        if (!this.snDimensionSearch.sn) {
          this.$message.warning('请输入序列号查询！');
          return;
        }
        this.requestLoading = true;
        await getSnByOuterSn({ sn: this.snDimensionSearch.sn }).then(
          (res) => {
            this.snDimensionSearch.sn = this._get(res, 'data.data.productSn', '');
            this.workOrderNos = this._get(res, 'data.data.workOrderNoList', []);
            this.requestLoading = false;
            this.queryWorkOrderInfo();
          },
          (error) => {
            this.requestLoading = false;
          }
        );
      }
      if (this.activeName === '工单追溯') {
        if (!this.woDimensionSearch.productionOrderNo && !this.woDimensionSearch.workOrderNo) {
          this.$message.warning('请输入生产订单或工单号查询！');
          return;
        } else {
          this.requestLoading = true;
          await this.queryWorkOrderInfo();
          this.requestLoading = false;
        }
      }
      this.isShowAssociationData = false;
      this.isShowPassingStationData = false;
      this.isShowAssembleParentLevelData = false;
      this.isShowAssemblySubLevelData = false;
      this.isShowUsePartData = false;
      this.isShowAccessoriesData = false;
      this.isShowEquipmentData = false;
      this.isShowPackData = false;
      this.isShowMaintenanceData = false;
      this.isShowInspectionData = false;
      this.isShowTestData = false;
      if (this.activeName != '序列号追溯') {
        setTimeout(() => {
          focusInput('workOrderNo');
        }, 500);
      } else {
        focusInput('sn');
      }
    },
    queryWorkOrderInfo() {
      this.workOrderLoading = true;
      let params = {};
      if (this.activeName === '序列号追溯') {
        params = { workOrderNoList: this.workOrderNos };
      } else {
        params = { productionOrderNo: this.woDimensionSearch.productionOrderNo, workOrderNoList: [this.woDimensionSearch.workOrderNo] };
      }
      getWorkOrderInfo(params).then(
        async (res) => {
          this.workOrderLoading = false;
          this.workOrderData = this._get(res, 'data.data', []);
          if (this.activeName === '序列号追溯') {
            await this.querySection();
            this.queryDeliveryInfo();
          }
          if (this.activeName === '工单追溯' && this.workOrderData.length === 1) {
            await this.querySection();
            this.queryDeliveryInfo();
          }
          // this.getWorkSectionList();
        },
        (error) => {
          this.workOrderLoading = false;
          this.workOrderData = [];
        }
      );
    },
    queryByWorkOrderNo(workOrderNo) {
      this.woDimensionSearch.workOrderNo = workOrderNo;
      this.isShowAssociationData = false;
      this.isShowPassingStationData = false;
      this.isShowAssembleParentLevelData = false;
      this.isShowAssemblySubLevelData = false;
      this.isShowUsePartData = false;
      this.isShowAccessoriesData = false;
      this.isShowEquipmentData = false;
      this.isShowPackData = false;
      this.isShowMaintenanceData = false;
      this.isShowInspectionData = false;
      this.isShowTestData = false;
      this.querySection();
      this.queryDeliveryInfo();
    },
    querySection() {
      let params = {
        workOrderNo: this.activeName === '序列号追溯' ? this.workOrderData[0].workOrderNo : this.woDimensionSearch.workOrderNo
      };
      getSectionByWorkOrder(params).then((res) => {
        let data = this._get(res, 'data.data', []);
        let ids = this._map(data, (obj) => {
          return obj.sectionId;
        });
        this.sectionListFormWorkOrder = ids;
        this.getWorkSectionList();
      });
    },
    getWorkSectionList() {
      getTraceList(1, 10000).then((res) => {
        let data = this._get(res, 'data.data', []);
        this.workSectionList = [];
        this._forEach(data, (item) => {
          if (this.sectionListFormWorkOrder.indexOf(item.id) != -1) {
            // let extFields = item.extFields && item.extFields != null ? JSON.parse(item.extFields) : {};
            // let column = extFields.traceCommonFields;
            // if (extFields.traceCustomFields) {
            //   column.push(...extFields.traceCustomFields);
            // }
            this.workSectionList.push({
              key: item.id,
              name: item.name,
              column: [
                { label: '物料编码', prop: 'partNo' },
                { label: '物料名称', prop: 'partName' },
                { label: '物料品牌', prop: 'partBrand' },
                { label: '物料型号', prop: 'partModel' },
                { label: 'D/C', prop: 'dateCode' },
                { label: '物料内部批次', prop: 'lotNo' }
              ]
            });
          }
        });
      });
    },
    queryDeliveryInfo() {
      this.deliveryLoading = true;
      let params = {};
      let workOrderNos = this.workOrderNos.join(',');
      if (this.activeName === '序列号追溯') {
        params = { workOrderNos: workOrderNos };
      } else {
        params = { productionOrderNo: this._cloneDeep(this.woDimensionSearch.productionOrderNo), workOrderNos: this.woDimensionSearch.workOrderNo };
      }
      getDeliveryInfo(1, 10000, Object.assign(params)).then(
        (res) => {
          this.deliveryLoading = false;
          this.deliveryData = this._get(res, 'data.data.records', []);
          this.requestLoading = false;
        },
        (error) => {
          this.deliveryLoading = false;
          this.deliveryData = [];
          this.requestLoading = false;
        }
      );
    },
    queryAssociationInfo() {
      this.associationLoading = true;
      getAssociationInfo(1, 10000, this.snDimensionSearch).then(
        (res) => {
          this.associationLoading = false;
          const data = res.data.data;
          this.associationData = data.records;
        },
        (error) => {
          this.associationLoading = false;
          this.associationData = [];
        }
      );
    },
    queryOverStationInfo() {
      this.passingStationLoading = true;
      let params = {};
      if (this.activeName === '序列号追溯') {
        params = this._cloneDeep(this.snDimensionSearch);
        getOverStationInfoBySn(this.passingStationPage.currentPage, this.passingStationPage.pageSize, Object.assign(params)).then(
          (res) => {
            const data = res.data.data;
            this.passingStationPage.total = data.total;
            this.passingStationData = data.records;
            this._forEach(this.passingStationData, (item) => {
              item['operator'] = item.operatorNames;
            });
            this.passingStationLoading = false;
          },
          (error) => {
            this.passingStationLoading = false;
            this.passingStationData = [];
          }
        );
      } else {
        params = this._cloneDeep(this.woDimensionSearch);
        params['workOrderNos'] = params.productionOrderNo;
        delete params.productionOrderNo;
        getOverStationInfoByWorkOrderNo(this.passingStationPage.currentPage, this.passingStationPage.pageSize, Object.assign(params)).then(
          (res) => {
            const data = res.data.data;
            this.passingStationPage.total = data.total;
            this.passingStationData = data.records;
            this.passingStationLoading = false;
          },
          (error) => {
            this.passingStationLoading = false;
            this.passingStationData = [];
          }
        );
      }
    },
    passingStationCurrentChange(currentPage) {
      this.passingStationPage.currentPage = currentPage;
      this.queryOverStationInfo();
    },
    passingStationSizeChange(pageSize) {
      this.passingStationPage.pageSize = pageSize;
      this.queryOverStationInfo();
    },
    queryAssembleParentLevelInfo() {
      this.assembleParentLevelLoading = true;
      getAssemblyParentInfo(1, 10000, this.snDimensionSearch).then(
        (res) => {
          const data = res.data.data;
          this.assembleParentLevelData = data.records;
          this.assembleParentLevelLoading = false;
        },
        (error) => {
          this.assembleParentLevelLoading = false;
          this.assembleParentLevelData = [];
        }
      );
    },
    queryAssembleSubLevelInfo() {
      this.assemblySubLevelLoading = true;
      getAssemblySonInfo(1, 10000, this.snDimensionSearch).then(
        (res) => {
          const data = res.data.data;
          this.assemblySubLevelData = data.records;
          this.assemblySubLevelLoading = false;
        },
        (error) => {
          this.assemblySubLevelLoading = false;
          this.assemblySubLevelData = [];
        }
      );
    },
    queryAccessoryInfo() {
      this.accessoriesLoading = true;
      let params = {};
      if (this.activeName === '序列号追溯') {
        params = this._cloneDeep(this.snDimensionSearch);
      } else {
        params = this._cloneDeep(this.woDimensionSearch);
      }
      getAccessoryInfo(this.accessoriesPage.currentPage, this.accessoriesPage.pageSize, Object.assign(params)).then(
        (res) => {
          const data = res.data.data;
          this.accessoriesPage.total = data.total;
          this.accessoriesData = data.records;
          this.accessoriesLoading = false;
        },
        (error) => {
          this.accessoriesLoading = false;
          this.accessoriesData = [];
        }
      );
    },
    accessoriesCurrentChange(currentPage) {
      this.ccessoriesPage.currentPage = currentPage;
    },
    accessoriesSizeChange(pageSize) {
      this.ccessoriesPage.pageSize = pageSize;
    },
    queryEquipmentInfo() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params = this._cloneDeep(this.snDimensionSearch);
      } else {
        params = this._cloneDeep(this.woDimensionSearch);
      }
      getEquipmentInfo(this.equipmentPage.currentPage, this.equipmentPage.pageSize, Object.assign(params)).then(
        (res) => {
          const data = res.data.data;
          this.equipmentPage.total = data.total;
          this.equipmentData = data.records;
          this.equipmentLoading = false;
        },
        (error) => {
          this.equipmentLoading = false;
          this.equipmentData = [];
        }
      );
    },
    equipmentCurrentChange(currentPage) {
      this.equipmentPage.currentPage = currentPage;
      this.queryEquipmentInfo();
    },
    equipmentSizeChange(pageSize) {
      this.equipmentPage.pageSize = pageSize;
      this.queryEquipmentInfo();
    },
    queryPackInfo() {
      let params = this._cloneDeep(this.snDimensionSearch);
      getPackInfo(this.packPage.currentPage, this.packPage.pageSize, params).then(
        (res) => {
          const data = res.data.data;
          this.packPage.total = data.total;
          this.packData = data.records;
          this.packLoading = false;
        },
        (error) => {
          this.packLoading = false;
          this.packData = [];
        }
      );
    },
    queryInspectionInfo() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params = this._cloneDeep(this.snDimensionSearch);
      } else {
        params = this._cloneDeep(this.woDimensionSearch);
      }
      getInspectionInfo(this.inspectionPage.currentPage, this.inspectionPage.pageSize, Object.assign(params)).then(
        (res) => {
          const data = res.data.data;
          this.inspectionPage.total = data.total;
          this.inspectionData = data.records;
          this.inspectionLoading = false;
        },
        (error) => {
          this.inspectionLoading = false;
          this.inspectionData = [];
        }
      );
    },
    maintenanceCurrentChange(currentPage) {
      this.maintenancePage.currentPage = currentPage;
      this.queryMaintenanceInfo();
    },
    maintenanceSizeChange(pageSize) {
      this.maintenancePage.pageSize = pageSize;
      this.queryMaintenanceInfo();
    },
    async queryMaintenanceInfo() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params = this._cloneDeep(this.snDimensionSearch);
      } else {
        params = this._cloneDeep(this.woDimensionSearch);
      }
      params['objectType'] = 'REPAIR';
      params['traceType'] = 'FORWARD';
      try {
        this.maintenanceLoading = true;
        const res = await getRepairInfoBySn(this.maintenancePage.currentPage, this.maintenancePage.pageSize, params);
        const data = res.data.data || [];
        this.maintenanceData = data.records;
        console.log(this.maintenanceData);
        this.maintenancePage.total = data.total || 0;
        this.$refs.maintenanceCrud.refreshTable();
      } catch (e) {
        this.maintenanceData = [];
      } finally {
        this.maintenanceLoading = false;
      }
      console.log(this.maintenanceLoading);
    },
    queryMachineTestInfo() {
      this.testLoading = true;
      let params = this._cloneDeep(this.snDimensionSearch);
      getMachineTestInfo(this.testPage.currentPage, this.testPage.pageSize, params).then(
        (res) => {
          const data = res.data.data || [];
          this.testPage.total = data.total;
          this.testData = data.records;
          this.testLoading = false;
        },
        (error) => {
          this.testLoading = false;
          this.testData = [];
        }
      );
    },
    testCurrentChange(currentPage) {
      this.testPage.currentPage = currentPage;
      this.queryMachineTestInfo();
    },
    testSizeChange(pageSize) {
      this.testPage.pageSize = pageSize;
      this.queryMachineTestInfo();
    },
    equipmentDetailView(row) {
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '详情',
        url: `/api/mes-abacus/production-trace/page-query-forward-trace-equipment-detail?equipmentCode=${row.equipmentCode}`,
        isPage: true,
        menu: false,
        editBtn: false,
        selection: false,
        readonly: true,
        tip: false,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '工装治具类型',
            prop: 'equipmentType',
            type: 'select',
            dicData: [
              {
                label: '飞达',
                vlaue: 'FEEDER'
              },
              {
                label: '飞达车',
                vlaue: 'FEEDERBUS'
              }
            ]
          },
          {
            label: '编码',
            prop: 'equipmentCode'
          },
          {
            label: '型号',
            prop: 'equipmentModel'
          }
        ]
      };
    },
    /**
     * 重新加载公用表格弹窗组件
     */
    newKey() {
      this.timer = new Date().getTime();
    },
    queryWarehouseUsePart() {
      let params = {};
      if (this.activeName === '序列号追溯') {
        params = { workOrderNos: this.workOrderNos.join(',') };
      } else {
        params = { workOrderNos: this.woDimensionSearch.workOrderNo };
      }
      getWarehouseUsePart(this.warehouseUsePartPage.currentPage, this.warehouseUsePartPage.pageSize, Object.assign(params)).then((res) => {
        const data = res.data.data;
        this.warehouseUsePartPage.total = data.total;
        this.warehouseUsePartData = data.records;
        this.warehouseUsePartLoading = false;
      });
    },
    warehouseUsePartCurrentChange(currentPage) {
      this.warehouseUsePartPage.currentPage = currentPage;
      this.queryWarehouseUsePart();
    },
    warehouseUsePartSizeChange(pageSize) {
      this.warehouseUsePartPage.pageSize = pageSize;
      this.queryWarehouseUsePart();
    },
    toggleInfo(type) {
      if (!this[type] && this.activeName === '序列号追溯' && !this.snDimensionSearch.sn) {
        this.$message.error('请输入序列号！');
        return;
      } else if (!this[type] && this.activeName === '工单追溯' && !this.woDimensionSearch.workOrderNo) {
        this.$message.error('请输入工单号！');
        return;
      }
      this[type] = !this[type];
      switch (type) {
        case 'isShowAssociationData':
          if (this[type]) {
            this.queryAssociationInfo();
          }
          break;
        case 'isShowPassingStationData':
          if (this[type]) {
            this.queryOverStationInfo();
          }
          break;
        case 'isShowAssembleParentLevelData':
          if (this[type]) {
            this.queryAssembleParentLevelInfo();
          }
          break;
        case 'isShowAssemblySubLevelData':
          if (this[type]) {
            this.queryAssembleSubLevelInfo();
          }
          break;
        case 'isShowUsePartData':
          if (this[type]) {
            this.usePartType = 'warehouseUsePart';
            this.queryWarehouseUsePart();
          }
          break;
        case 'isShowAccessoriesData':
          if (this[type]) {
            this.queryAccessoryInfo();
          }
          break;
        case 'isShowEquipmentData':
          if (this[type]) {
            this.queryEquipmentInfo();
          }
          break;
        case 'isShowPackData':
          if (this[type]) {
            this.queryPackInfo();
          }
          break;
        case 'isShowMaintenanceData':
          if (this[type]) {
            this.queryMaintenanceInfo();
          }
          break;
        case 'isShowInspectionData':
          if (this[type]) {
            this.queryInspectionInfo();
          }
          break;
        case 'isShowTestData':
          if (this[type]) {
            this.queryMachineTestInfo();
          }
          break;
        default:
          break;
      }
    },
    /**
     * 页面内定位表格
     */
    goToLocation(type) {
      console.log(type, $(type).offset().top);
      $('#avue-view').animate(
        {
          scrollTop: $(type).offset().top + $('#avue-view').scrollTop() - 110
        },
        500
      );
    },
    openProductionOrderModal() {
      this.modalName = 'productionOrderModal';
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择生产订单（双击进行选择）',
        url: '/api/mes-product/production-order/page',
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '生产订单',
            prop: 'productionOrderNo',
            search: true
          },
          {
            label: '订单数量',
            prop: 'quantity',
            search: true
          },
          {
            label: '产品编码',
            prop: 'productPartNo'
          },
          {
            label: '产品名称',
            prop: 'productPartName'
          },
          {
            label: 'BOM版本',
            prop: 'bomVersion'
          },
          {
            label: '销售订单号',
            prop: 'salesOrderNo'
          },
          {
            label: '客户名称',
            prop: 'customerName'
          },
          {
            label: '交货日期',
            prop: 'deliveryDate'
          }
        ]
      };
    },
    openWorkOrderNoModal() {
      this.modalName = 'workOrderModal';
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择工单号（双击进行选择）',
        url: `/api/mes-product/work-order/page?productionOrderNo=${this.woDimensionSearch.productionOrderNo}`,
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '生产订单',
            prop: 'productionOrderNo'
          },
          {
            label: '工单号',
            prop: 'workOrderNo',
            search: true
          },
          {
            label: '工单类型',
            prop: 'type',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=order_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            dicData: [
              {
                label: '待排程',
                value: 1
              },
              {
                label: '待生产',
                value: 2
              },
              {
                label: '生产中',
                value: 3
              },
              {
                label: '完工',
                value: 4
              },
              {
                label: '锁定',
                value: 5
              },
              {
                label: '强制完工',
                value: 6
              }
            ]
          },
          {
            label: '产品编码',
            prop: 'productPartNo'
          },
          {
            label: '产品型号',
            prop: 'productPartModel'
          },
          {
            label: '产品名称',
            prop: 'productPartName'
          },
          {
            label: '备注',
            prop: 'remark'
          }
        ]
      };
    },
    /**
     * 选择模态框行数据
     */
    getSelectedRows(rowData) {
      if (this.modalName === 'productionOrderModal') {
        this.woDimensionSearch.productionOrderNo = rowData.productionOrderNo;
        this.onSubmit();
      } else if (this.modalName === 'workOrderModal') {
        this.woDimensionSearch.workOrderNo = rowData.workOrderNo;
        this.onSubmit();
      }
    },
    workOrderDetailView(row) {
      this.showWorkOrderDetailDialog = true;
      this.viewWorkOrderNo = row.workOrderNo;
      this.queryWorkOrderDetail();
    },
    queryWorkOrderDetail() {
      this.workOrderDetailLoading = true;
      getWorkOrderDetailInfo(this.workOrderDetailPage.currentPage, this.workOrderDetailPage.pageSize, { workOrderNo: this.viewWorkOrderNo }).then((res) => {
        const data = res.data.data;
        this.workOrderDetailPage.total = data.total;
        this.workOrderDetailData = data.records;
        this.workOrderDetailLoading = false;
      });
    },
    workOrderDetailCurrentChange(currentPage) {
      this.workOrderDetailPage.currentPage = currentPage;
      this.queryWorkOrderDetail();
    },
    workOrderDetailSizeChange(pageSize) {
      this.workOrderDetailPage.pageSize = pageSize;
      this.queryWorkOrderDetail();
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
::v-deep .el-card__header {
  padding: 6px 10px !important;
}
::v-deep .el-card__body {
  padding: 10px;
  .avue-crud__menu {
    display: none;
  }
}
::v-deep .el-table {
  margin-bottom: 25px;
}
::v-deep .is-never-shadow {
  padding: 0;
}
::v-deep .avue-crud--card {
  .el-card__body {
    padding: 0;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: center;
  height: 35px;
  .titleLeft {
    display: flex;
    align-items: center;
    .titleName {
      user-select: none;
      display: flex;
      align-items: center;
      cursor: pointer;
      .arrowRight {
        transform: rotate(0);
        transition: all 0.2s;
        &.arrowDown {
          transform: rotate(90deg);
          transition: all 0.2s;
        }
      }
    }
  }
  span {
    color: #0995bb;
  }
}
.box-card {
  position: fixed;
  top: 50%;
  right: 1%;
  width: 11%;
  min-width: 200px;
  translate: 0 -50%;
  // height: 70%;
  z-index: 9999;
  .catalogue {
    user-select: none;
    ul {
      margin-left: -10px;
      li {
        list-style: disc;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
}
.box-card-hide {
  position: fixed;
  top: 30%;
  right: 1%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  cursor: pointer;
  z-index: 9999;
}
::v-deep .el-table__header {
  thead {
    th {
      background-color: #fafafa;
      padding: 8px 0;
      color: rgba(0, 0, 0, 0.85);
      font-size: 12px;
    }
  }
}
</style>
